<template>
  <div class="jifen">
    <header>
      <div class="left"  @click="danji"><a><img src="../assets/img/m1.png" ></a></div>
      <div class="center">{{msg}}</div>  
      <div class="right"><a></a></div>
    </header>
    <main>
    <div class="top">
      <img src="../assets/img/m23.png" >
    </div>
    <div class="center">
      恭喜您的提交已申请成功
    </div>
    <div class="button">
      <a @click="danji">确定</a>
    </div>
  </main>
  </div>
  

</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '兑换详情'
    }
  },
  methods: {
    danji () {
      this.$router.go(-2)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
header{
  position: fixed;
  top: 0;
  width: 100%;
  .height(140);
  .font-size(40);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #28a85b;
  color:#ffffff;
  .left,.right{
      .width(160) ;
  }
  .center{
      flex: 1;
      text-align: center;
  }
  .left{
    a{
      display: block;
      img{
        .height(40);
        .padding(0,0,0,40);
        display: block;
      }
    }
  }
}
main{
  .padding(190,0,0,0);
  .top{
    display: flex;
    img{
      display: block;
      margin: auto;
      .width(250);
    }
  }
  .center{
    text-align: center;
    .font-size(34);
    .margin(56,0,145,0);
  }
  .button{
    a{
      text-decoration: none;
      display: block;
      width: 70%;
      margin: 0 auto;
      text-align: center;
      background: #28a85b;
      .line-height(100);
      .font-size(38);
      color: #ffffff;
      .border-radius(5); 
    }
  }
}
</style>
